<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>网上花店</title>

</head>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./js/swiper-3.4.2.min.css">
<link rel="stylesheet" href="./css/swiper.css">
<link rel="stylesheet" href="./js/animate.min.css">
<link rel="stylesheet" href="./js/layui.css">

<body>
	<div class="top-bar">
		<div class="banner">
			<span class="left">欢迎访问在线商城</span>
			<span class="right">
				<a href="#" id="search"><i class="iconfont icon-search"></i></a>
				<a href="./card.html"><i class="iconfont icon-cart"></i></a>
				<a href="./login.html"><i class="iconfont icon-user"></i></a>
			</span>
		</div>
		<div class="searchBox">
			<div class="layui-form-item" style="margin: 0;">
				<div class="layui-input-block flex-box" style="margin: 0;">
					<input type="text" name="title" required lay-verify="required" placeholder="请输入关键字" autocomplete="off"
						class="layui-input">
					<button onclick="redirect()" class="layui-btn layui-btn-normal" style="margin-left: 10px;">搜索</button>
				</div>
			</div>
		</div>
	</div>
	<header>
		<ul class="nav">
			<li><i class="iconfont icon-shouye" style="font-size: 20px;"></i><a href="./index.html">商城首页</a></li>
			<li><i class="iconfont icon-suoyou" style="font-size: 20px;"></i><a href="./all.html">所有商品</a></li>
			<li><i class="iconfont icon-liuyanpinglun" style="font-size: 20px;"></i><a href="./leave_message.html">留言</a></li>
			<li><i class="iconfont icon-guanyu" style="font-size: 20px;"></i><a href="./diary.html">养花日记</a></li>
			<!-- <li><i class="iconfont icon-liuyanpinglun"></i><a href="#">待定</a></li> -->
		</ul>
	</header>
	<div class="swiper-container wow slideInRight" data-wow-duration="1s" data-wow-delay="0s">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<img src="./img/2.jpg" width="100%" alt="sss">
			</div>
			<div class="swiper-slide">
				<img src="./img/3.jpg" width="100%" alt="sss">
			</div>

		</div>
		<div class="mask">
			<div class="title">
				<b>W E L C O M E</b>
			</div>
		</div>
	</div>
	<div id="first">
		<div class="left wow slideInRight" data-wow-duration="1s" data-wow-delay="0.5s" data-wow-offset="0">
			<img src="./img/1.webp" alt="sss">
		</div>
		<div class="left wow slideInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="0">
			<img src="./img/2.webp" alt="sss">
		</div>
	</div>
	<div id="second">
		<div class="second-header">
			<h2>今日上新</h2>
			<a href="#"><span>+ 查看更多</span></a>
		</div>
		<div class="new-flower">
			<ul class="flower">
				<li class="wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.5s" data-wow-offset="0">
					<figure>
						<a href="#"><img src="./img/new-flower/1.webp" alt="sss"></a>
						<figcaption>
							<span class="price">￥ 6000</span>
							<span class="name">植物花卉1</span>
						</figcaption>
					</figure>
				</li>
				<li class="wow bounceInUp" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="0">
					<figure>
						<a href="#"><img src="./img/new-flower/24.webp" alt="sss"></a>
						<figcaption>
							<span class="price">￥ 6000</span>
							<span class="name">植物花卉2</span>
						</figcaption>
					</figure>
				</li>
				<li class="wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.6s" data-wow-offset="0">
					<figure>
						<a href="#"><img src="./img/new-flower/3.webp" alt="sss"></a>
						<figcaption>
							<span class="price">￥ 6000</span>
							<span class="name">植物花卉3</span>
						</figcaption>
					</figure>
				</li>
				<li class="wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.9s" data-wow-offset="0">
					<figure>
						<a href="#"><img src="./img/new-flower/4.webp" alt="sss"></a>
						<figcaption>
							<span class="price">￥ 6000</span>
							<span class="name">植物花卉4</span>
						</figcaption>
					</figure>
				</li>
			</ul>
		</div>
	</div>
	<div id="third">
		<div class="second-header">
			<h2>限时促销</h2>
			<a href="#"><span>+ 查看更多</span></a>
		</div>
		<div class="content">
			<div class="left">
				<div class="box1 wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.3" data-wow-offset="0">
					<a href="#"><img src="./img/new-flower/6.webp" alt="kkk"></a>
					<div class="abstract">
						<h1 class="title">植物花卉名称</h1>
						<div class="price">
							<del>￥ 6000</del>
							<span class="current-price">￥ 4000</span>
						</div>
						<p>紫藤又名藤萝、朱藤，是优良的观花藤木植物，一般应用于园林棚架，
							春季紫花烂漫，别有情趣，适栽于湖畔、
							池边、假山、石坊等处，具独特风格，盆景也常用。</p>
					</div>
				</div>
				<div class="box1 wow bounceInUp" data-wow-duration="1s" data-wow-delay="0.5s" data-wow-offset="0">
					<a href="#"><img src="./img/new-flower/6.webp" alt="kkk"></a>
					<div class="abstract">
						<h1 class="title">植物花卉名称</h1>
						<div class="price">
							<del>￥ 6000</del>
							<span class="current-price">￥ 4000</span>
						</div>
						<p>紫藤又名藤萝、朱藤，是优良的观花藤木植物，一般应用于园林棚架，
							春季紫花烂漫，别有情趣，适栽于湖畔、
							池边、假山、石坊等处，具独特风格，盆景也常用。</p>
					</div>
				</div>
			</div>
			<div class="right wow slideInRight" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">
				<a href="#"><img src="./img/new-flower/5.webp" alt="kkk" width="390px" height="100%"></a>
				<a href="#" style="display: block;">
					<div class="mask">
						<div class="abstract">
							<h1>植物花卉名称</h1>
							<div class="price">
								<del>￥ 6000</del>
								<span class="current-price">￥ 4000</span>
							</div>
							<p>紫藤又名藤萝、朱藤，是优良的观花藤木植物，一般应用于园林棚架，
								春季紫花烂漫，别有情趣，适栽于湖畔、
								池边、假山、石坊等处，具独特风格，盆景也常用。</p>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
	<div id="fourth">
		<div class="second-header">
			<h2>装点家园</h2>
			<a href="#"><span>+ 查看更多</span></a>
		</div>
		<div class="content">
			<ul>
				<li class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.5s" data-wow-offset="0">
					<a href="#" style="display: block;">
						<div class="top">
							<img src="./img/new-flower/8.webp" alt="555" width="100%">
						</div>
						<div class="bottom">
							<div class="name">植物花卉名称</div>
							<div class="price">￥ 4500</div>
						</div>
					</a>
				</li>
				<li class="wow bounceInLeft" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">
					<a href="#" style="display: block;">

						<div class="bottom">
							<div class="name">植物花卉名称</div>
							<div class="price">￥ 4500</div>
						</div>
						<div class="top">
							<img src="./img/new-flower/8.webp" alt="555" width="100%">
						</div>
					</a>
				</li>
				<li class="wow bounceInRight" data-wow-duration="1s" data-wow-delay="0.8s" data-wow-offset="0">
					<a href="#" style="display: block;">
						<div class="top">
							<img src="./img/new-flower/8.webp" alt="555" width="100%">
						</div>
						<div class="bottom">
							<div class="name">植物花卉名称</div>
							<div class="price">￥ 4500</div>
						</div>
					</a>
				</li>
				<li class="wow bounceInRight" data-wow-duration="1s" data-wow-delay="1s" data-wow-offset="0">
					<a href="#" style="display: block;">

						<div class="bottom">
							<div class="name">植物花卉名称</div>
							<div class="price">￥ 4500</div>
						</div>
						<div class="top">
							<img src="./img/new-flower/8.webp" alt="555" width="100%">
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>

	<footer style="height: 100px; background: #757575;margin-top: 20px;">

		<div class="display">
			<img src="./img/插画/1.png" alt="www" width="80px" height="80px">
			<div class="contact">
				<span>邮箱：56623265564@qq.com</span>
				<span>电话：400 6666 6666</span>
			</div>
			<img src="./img/插画/3.png" alt="www" width="80px" height="80px">
		</div>
		<!-- <div class="welcome">
			欢迎访问在线商城
		</div> -->
		<!-- <div class="profile">
			<p>本店销售各种植物花卉，如向日葵、百合、菊花、玫瑰、白百合、红玫瑰、牡丹、雏菊、郁金香、月季、康乃馨......可预订和在线购买。</p>
		</div> -->
	</footer>
	<!-- Swiper JS -->
	<script src="./js/swiper-3.4.2.min.js"></script>
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>

	<script src="./js/wow.min.js"></script>
	<script src="./js/layui.js"></script>
	<!-- Initialize Swiper -->
	<script>
		new WOW().init();
		var swiper = new Swiper('.swiper-container', {
			loop: true,
			autoplay: 5000
		});
		$("#search").click(function (e) {

			$(".searchBox").toggle(500)
		})
		// $("body").click(function() {
		// 	$(".searchBox").hide(500)
		// })
		function redirect() {
			console.log("跳转");
			window.location.replace("./all.html");

		}
	</script>
</body>

</html>